<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test21</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js">
    </script>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-25</h1>
<div id="app">
    <p>jquery 添加\删除元素</p>
    <br>
    <div>
        <p>1、添加</p>
        <ul>
            <li>append() - 在被选元素的结尾插入内容</li>
            <li>prepend() - 在被选元素的开头插入内容</li>
            <li>after() - 在被选元素之后插入内容</li>
            <li>before() - 在被选元素之前插入内容</li>
        </ul>
        <p id="show">添加元素</p>
        <br>
        <button class="show1">append</button>
        <button class="show2">prepend</button>
        <button class="show3">after</button>
        <button class="show4">before</button>
    </div>

    <br>
    <br>

    <div>
        <p>2、删除</p>
        <ul>
            <li>remove() - 删除被选元素（及其子元素）</li>
            <li>empty() - 从被选元素中删除子元素</li>
        </ul>
        <div id="del1" style="background-color: #5cb85c; width: 100px;height: 100px">
            <P class="del1_text1">一个文本</P>
            <P class="del1_text2">另一个文本</P>
        </div>
        <br>
        <div id="del2" style="background-color: #5cb85c; width: 100px;height: 100px">
            <P class="del2_text1">一个文本</P>
            <P class="del2_text2">另一个文本</P>
        </div>
        <br>
        <div id="del3" style="background-color: #5cb85c; width: 100px;height: 100px">
            <P class="del3_text1">一个文本</P>
            <P class="del3_text2">另一个文本</P>
        </div>
        <br>
        <br>
        <button id="del_btn_1">remove</button>
        <button id="del_btn_2">empty</button>
        <button id="del_btn_3">remove("")</button>
    </div>
    <br>

</div>
<script>
    $(document).ready(function () {
        $("button.show1").click(function () {
            $("#show").append("<b>结尾添加</b>")
        })
        $("button.show2").click(function () {
            $("#show").prepend("<b>开头添加</b>")
        })
        $("button.show3").click(function () {
            $("#show").after("<b>之前添加</b>")
        })
        $("button.show4").click(function () {
            $("#show").before("<b>之后添加</b>")
        })

        $("#del_btn_1").click(function () {
            $("#del1").remove()
        })
        $("#del_btn_2").click(function () {
            $("#del2").empty()
        })
        $("#del_btn_3").click(function () {
            $("p").remove(".del3_text2")
        })
    })
</script>
</body>
</html>